const personArr = [
  { name: "王港", src: "./img/3.png", desc: "颈椎不好", sex: "m" },
  { name: "刘莹", src: "./img/5.png", desc: "我是谁", sex: "f" },
  { name: "王秀莹", src: "./img/4.png", desc: "我很好看", sex: "f" },
  { name: "刘金雷", src: "./img/1.png", desc: "你没见过陌生的脸", sex: "m" },
  { name: "刘飞翔", src: "./img/2.png", desc: "瓜皮刘", sex: "m" },
];

const oUl = document.querySelector("ul");
function renderList(data) {
  oUl.innerHTML = data
    .map(
      (person) => `<li>
      <img src="${person.src}" alt="" />
      <p class="name">${person.name}</p>
      <p class="des">${person.desc}</p>
    </li>`
    )
    .join("");
}

renderList(personArr);

const filterFuncEl = document.querySelector(".filterFunc");
const oInputEl = filterFuncEl.querySelector("input");

const State = createStore({
  name: "",
  sex: "",
});

function update() {
  renderList(lastFilter(personArr, State));
}

State.subscribe(update);

filterFuncEl.onclick = function ({ target }) {
  const tagName = target.tagName;
  if (tagName !== "INPUT") {
    filterFuncEl.querySelector(".active").classList.remove("active");
    target.classList.add("active");
    const sex = target.innerHTML.includes("Male")
      ? "m"
      : target.innerHTML.includes("Female")
      ? "f"
      : "";
    State.dispatch({ type: "sex", value: sex });
  }
};

oInputEl.oninput = function () {
  State.dispatch({ type: "name", value: this.value });
};
